<template>
  <view class="icon-group-categories-container">
    <gd-tag
      v-for="(item, idx) in curIconGroupCategories"
      :key="item"
      style="margin: 5px 10px 5px 0px; cursor: pointer"
      :type="sampleSize(colorTypes, 1)[0]"
      v-show="isFoldingCategories(item, idx)"
    >
      {{ item }}
    </gd-tag>
    <view
      style="text-align: center; cursor: pointer"
      @click="onClickMoreIconGroupCategories"
    >
      <gd-icon
        :icon-name="moreStatusActived ? 'arrow-up' : 'arrow-down'"
      ></gd-icon
    ></view>
  </view>
</template>
<script setup>
import { ref } from "vue";
import { getRandom, sampleSize } from "@gd-accbuild-core/config/utils";
const colorTypes = ["", "info", "success", "danger", "warning"];
const props = defineProps({
  curIconGroupCategories: {
    type: Array,
    default: () => [],
  },
});
const isFoldingCategories = (item, idx) => {
  if (moreStatusActived.value) {
    return true;
  } else {
    return idx <= 5;
  }
};
const moreStatusActived = ref(false);
const getContainerHeight = () => {
  const el = document.querySelector(".icon-group-categories-container");
  if (el) {
    return el.offsetHeight;
  } else {
    return 21;
  }
};
const _emits = defineEmits(["update:iconGroupAreaHeight"])
const onClickMoreIconGroupCategories = () => {
  moreStatusActived.value = !moreStatusActived.value;
  setTimeout(() => {
    _emits("update:iconGroupAreaHeight",getContainerHeight());
  }, 300);
};
</script>
